<div class="layui-form" lay-filter="layuiadmin-form-tags" id="layuiadmin-form">
    <div id="baseApp">
        <div class="layui-form-item">
            <label class="layui-form-label">配置名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" v-model="find.name" lay-verify="required"
                           placeholder="请输入..." autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">配置类型</label>
            <div class="layui-input-inline append-group">

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">配置值</label>
            <div class="layui-input-inline" style="width: 70%;">
                <block v-if="find.type == 1">
                    <textarea name="value" class="layui-textarea" lay-verify="required" placeholder="请输入..." style="width:300px;height:100px;" v-model="find.value"></textarea>
                </block>
                <block v-if="find.type == 2">
                    <div class="" v-for="(item,index) in json" style="margin-top: 10px;">
                        <input type="text" class="layui-input" v-model="item.name" style="width: 100px;display: inline-block" @blur="jsonData()">
                        <input type="text" class="layui-input" v-model="item.value" style="width: 100px;display: inline-block" @blur="jsonData()">
                        <button type="button" style="height:36px;line-height: 36px;" class="layui-btn layui-btn-sm layui-btn-primary" @click="add">添加</button>
                        <button type="button" style="height:36px;line-height: 36px;" class="layui-btn layui-btn-sm layui-btn-danger" @click="remove(index)">删除</button>
                    </div>
                    <input type="hidden" name="value" v-model="find.value">
                </block>
                <block v-if="find.type == 3">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="valueBtn">上传图片</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" v-if="find.value" style="width:100px;" id="value" :src="find.value">
                            <img class="layui-upload-img" v-else id="value" style="width:100px;">
                        </div>
                    </div>
                    <input type="hidden" name="value" v-model="find.value">
                </block>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <input type="button" lay-submit lay-filter="layuiadmin-submit" value="确认" class="layui-btn">
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['admin', 'form', 'helper' , 'upload'], function () {
        var $        = layui.$
            , admin  = layui.admin
            , setter = layui.setter
            , layer  = layui.layer
            , helper = layui.helper
            , form   = layui.form;
        let app = new Vue({
            el : '#baseApp' ,
            data : {
                find : {
                    id : '' ,
                    name : '' ,
                    type : 1 ,
                    value : '' ,
                } ,
                json : [
                    {name : '' , value : ''}
                ] ,
            } ,
            watch:{
                'find.type' : function(){
                    this.$nextTick(function(){
                        form.render('select')
                        if (this.find.type == '3'){
                            $('.layui-upload-img').each((e, item) => {
                                let id = $(item).attr('id')
                                let renderId = '#' + id + 'Btn';
                                helper.uploadRender(renderId , setter.requestUrl + '/upload' , function(res){
                                    $(item).attr('src', res.data.path);
                                    $('input[name=' + id + ']').val(res.data.url);
                                });
                            })
                        }
                    })
                } ,
            } ,
            methods : {
                add : function () {
                    this.json.push({name : '' , value : ''});
                } ,
                remove : function (index) {
                    if (this.json.length == 1){
                        helper.error('必须保留一个');
                        return;
                    }
                    this.json.splice(index , 1);
                } ,
                // 处理数据为json
                jsonData : function () {
                    let data = {};
                    this.json.forEach(function (item , index) {
                        data[item.name] = item.value;
                    })
                    this.find.value = JSON.stringify(data);
                } ,
                // 渲染
                render(){
                    let type = this.find.type;
                    switch (parseInt(type)) {
                        case 2 :
                            this.renderJson();
                            break;

                    }
                } ,
                // 渲染json
                renderJson(){
                    if(!this.find.value){
                        return;
                    }
                    let data = JSON.parse(this.find.value);
                    let datas = [];
                    for (let item in data){
                        datas.push({name : item , value : data[item]});
                    }
                    this.json = datas;
                }
            } ,
            created(){
                let self = this;
                let id = window.params !== undefined && 'id' in window.params ? window.params.id : '';
                helper.get('/siteConfig/edit?id=' + id , function(res){
                    helper.renderSelect(res.data.types , 'type' , '.append-group' ,{
                        filter : 'type'
                    })
                    if('id' in res.data.find){
                        self.find = res.data.find;
                        self.render();
                    }
                    form.render('select');
                });

                form.on('select(type)' , function (res) {
                    // 处理数据
                    self.find.type = parseInt(res.value);
                    self.render();
                })
            } ,
        });
    });
</script>